import styled from "styled-components";

export const CommentWrap = styled.div`
  .comment-box {
    height: 33px;
    margin-top: 20px;
    border-bottom: 2px solid #c20c0c;
    span {
      :nth-child(1) {
        font-size: 20px;
        line-height: 28px;
        margin-right: 20px;
      }
      :nth-child(2) {
        color: #666;
      }
    }
  }
  #comment-send {
    margin-top: 20px;
    display: flex;
    .userHead {
      width: 50px;
      height: 50px;
      float: left;
      display: block;
      margin-right: 20px;
    }
    .comment-right {
      width: 100%;
      .emojiat {
        margin-top: 10px;
        .emojiR {
          position: relative;
          .emojiDiv {
            display: none;
            background-color: #fff;
            position: absolute;
            top: 20px;
            left: -12px;
            width: 290px;
            height: 177px;
            padding: 17px 17px 0 13px;
            z-index: 100;
            .emojid {
              height: 130px;
              .emojiImg {
                margin: 1px 2px 2px 1px;
                border: 1px solid #fff;
                cursor: pointer;
                width: 23px !important;
                height: 23px !important;
                float: left;
                :hover {
                  border: 1px solid red;
                }
                img {
                  width: 21px;
                  height: 21px;
                }
              }
            }
            .nextpro {
              height: 16px;
              position: relative;
              .page {
                text-align: center;
                .pagenum {
                  height: 15px;
                  line-height: 16px;
                  display: inline-block;
                  margin: 0 16px;
                  color: #666;
                }
                i {
                  width: 9px;
                  height: 9px;
                  display: inline-block;
                  cursor: pointer;
                  top: 4px;
                  margin: 0 16px;
                  vertical-align: middle;
                  line-height: 16px;
                  float: none;
                }
                .provied {
                  background-position: -110px 0;
                  :hover {
                    background-position: -110px -20px;
                  }
                }
                .next {
                  background-position: -120px 0;
                  :hover {
                    background-position: -120px -20px;
                  }
                }
              }
            }
          }
        }
        i {
          width: 18px;
          height: 18px;
          display: block;
          float: left;
          cursor: pointer;
        }
        .emoji {
          background-position: -40px -490px;
          margin-right: 10px;
        }
        .atb {
          background-position: -60px -490px;
        }
        .send {
          width: 46px;
          height: 25px;
          background-color: #2273c2;
          color: #fff;
          float: right;
          text-align: center;
          line-height: 25px;
          border-radius: 4px;
          cursor: pointer;
          :hover {
            background-color: #3887d2;
          }
        }
      }
      .ant-mentions-focused {
        border-color: #cdcdcd !important;
        box-shadow: none !important;
      }
      .ant-mentions {
        flex: 1;
        :hover {
          border-color: #cdcdcd !important;
        }
        :focus {
          border-color: #cdcdcd !important;
        }
        textarea {
          height: 63px !important;
          background-color: #fff;
        }
      }
    }
  }
  .comment-best {
    margin-top: 20px;
    p {
    }
    .comment-best-three {
      margin-bottom: 20px;
      .hot-comment-box {
        border-top: 1px solid #cdcdcd;
        padding: 20px 0;
        .hot-comment-s-box {
          display: flex;
          img {
          }
          .level {
            width: 35px;
            height: 12px;
          }
          .hot-comment-s-box-xq {
            flex: 1;
            margin-left: 15px;

            a {
              color: #0c73c2;
              padding-right: 2px;
            }
            .hot-comment-content {
              line-height: 20px;
            }
            .hot-comment-bb {
              padding-top: 25px;
              display: flex;
              justify-content: space-between;
              .hot-comment-time {
                color: #999;
              }
              .hot-comment-dz {
                .dz-icon {
                  width: 15px;
                  height: 14px;
                  background-position: -150px 0;
                  display: inline-block;
                  overflow: hidden;
                  margin-right: 5px;
                }
                .shu {
                  margin: 0 8px;
                }
                span {
                  cursor: pointer;
                  :hover {
                    text-decoration: underline;
                  }
                }
                .deleteD {
                  display: inline-block;
                  cursor: pointer;
                  :hover {
                    text-decoration: underline;
                  }
                }
              }
            }
          }
        }
      }
    }
    .new-comment-box {
      .new-comment-box {
        border-top: 1px solid #cdcdcd;
        padding: 20px 0;
        .new-comment-s-box {
          display: flex;
          img {
            width: 50px;
            height: 50px;
          }
          .level {
            width: 35px;
            height: 12px;
          }
          .new-comment-s-box-xq {
            flex: 1;
            margin-left: 15px;
            a {
              color: #0c73c2;
              padding-right: 2px;
            }
            .new-comment-content {
              line-height: 20px;
              img {
                width: 21px;
                height: 21px;
              }
            }
            .new-comment-bb {
              padding-top: 25px;
              display: flex;
              justify-content: space-between;
              .new-comment-time {
                color: #999;
              }
              .new-comment-dz {
                .dz-icon {
                  width: 15px;
                  height: 14px;
                  background-position: -150px 0;
                  display: inline-block;
                  overflow: hidden;
                  margin-right: 5px;
                }
                .shu {
                  margin: 0 8px;
                }
                span {
                  cursor: pointer;
                  :hover {
                    text-decoration: underline;
                  }
                }
                .deleteD {
                  display: inline-block;
                  cursor: pointer;
                  :hover {
                    text-decoration: underline;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
`;
